<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #box>div {
                width: 200px;
                height: 200px;
                background: blue;
                margin-bottom: 20px;
            }


            #wrap {
                width: 300px;
                height: 300px;
                background: blue;
                display: none;
            }

        </style>
        <!-- <script src="jquery.min.js"></script> -->
        <script>
            // console.log(document.getElementById('box'));
            // window.onload = function() {
            //     console.log(11111);
            //     console.log(document.getElementById('box'));
            // };

            // document.addEventListener('DOMContentLoaded', function() {
            //     console.log(222222);
            //     console.log(document.getElementById('box'));

            // });

            // DOM加载完成事件
            // $(document).ready(function() {
            //     console.log(document.getElementById('box'));

            // });

            // $(function() {
            //     console.log(document.getElementById('box'));
            // });



        </script>
    </head>
    <body>
<!--         <div id="box">
            hello
            <div></div>
            <div></div>
            <p>hi</p>
            <span>hello</span>
        </div> -->

        <div id="wrap"></div>

        <button id="btn">按钮</button>
    </body>
</html>
<script src="jquery.min.js"></script> 
<script>

    function randomNumer(m, n) {
        return Math.floor(Math.random() * (n - m + 1) + m);
    }

    function randomColor() {
        var r = randomNumer(0, 255);
        var g = randomNumer(0, 255);
        var b = randomNumer(0, 255);
        return "rgb(" + r + ',' + g + ',' + b + ')';
    }
    
    // $('#box').on('click mousemove', 'span', {name: 'waige', age: 20}, clickAction);

    // function clickAction(e) {
    //     console.log(e.data);
    //     // console.log(e.type);
    //     if (e.type === 'click') {
    //         alert($(this).text());
    //     } else if (e.type == 'mousemove') {
    //         $(this).css('background', randomColor());
    //     }
    // }
    // $('#box').off('click', 'span', clickAction);
    
    $('#btn').click(function() {
        $('#wrap').slideToggle(2000);
    });





</script>